<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>'风'味闽西-对应品种</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animate.min.css" />
    <script src="./js/js.js"></script>
    <style>
        .box2 {
            font-size: .24rem;
        }

        .box4 {
            font-size: .3rem;
        }

        .box5 {
            font-size: .3rem;
        }

        .jieshao {
            font-size: .24rem;
            width: 2.84rem;
        }

        .iconBox img {
            width: 1.55rem;
            /* height: 1.55rem; */
        }

        /* 初始隐藏动画元素 */
        .animate-on-scroll {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="contBoxInfo3">
        <div class="BigfoodItem">
            <div class="ftitle">
                <img src="./img/caigan/ti.png" alt="">
            </div>
            <div class="fcont">
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l1.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r1.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l2.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r2.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l3.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r3.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l4.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l5.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="BigfoodItem">
            <div class="ftitle">
                <img src="./img/caigan/tit2.png" alt="">
            </div>
            <div class="fcont">
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l1.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r6.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l7.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r7.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l8.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r8.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l9.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r9.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="BigfoodItem">
            <div class="ftitle">
                <img src="./img/caigan/ti.png" alt="">
            </div>
            <div class="fcont">
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l1.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r1.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l2.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r2.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l3.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r3.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l4.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l5.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="BigfoodItem">
            <div class="ftitle">
                <img src="./img/caigan/ti.png" alt="">
            </div>
            <div class="fcont">
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l1.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r1.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l2.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r2.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l3.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r3.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l4.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
                <div class="fItem">
                    <div class="flef animate-on-scroll" data-animation="fadeInLeft">
                        <img src="./img/caigan/l5.png" alt="">
                    </div>
                    <div class="frig animate-on-scroll" data-animation="fadeInRight">
                        <img src="./img/caigan/r5.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <script>

        
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 选择所有需要滚动动画的元素
            const animatedElements = document.querySelectorAll('.animate-on-scroll');
            
            // 创建交叉观察器实例
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    // 当元素进入视口
                    if (entry.isIntersecting) {
                        const element = entry.target;
                        const animation = element.getAttribute('data-animation');
                        
                        // 添加动画类
                        element.classList.add('animate__animated', `animate__${animation}`);
                        // 移除初始隐藏类
                        element.classList.remove('animate-on-scroll');
                        // 停止观察已动画的元素
                        observer.unobserve(element);
                    }
                });
            }, {
                // 当元素可见部分达到10%时触发
                threshold: 0.1
            });
            
            // 观察所有动画元素
            animatedElements.forEach(element => {
                observer.observe(element);
            });
        });
    </script>
</body>

</html>